<template>
  <div>
    <tablePaging :tableItem="tableItem" :operationItem="operationItem">
      <template v-slot:customSearch>
        <!-- <span>自定义搜索插槽</span> -->
      </template>
      <template v-slot:customTableHeader>
        <!-- <span>自定义表单头部,需要设置operationItem的customTableHeader属性为true</span> -->
      </template>
    </tablePaging>
    <bankPreview :previewObj="previewObj"></bankPreview>
  </div>
</template>

<script setup>
import tablePaging from '@/views/common/component/table-paging'
import bankPreview from '../component/bankPreview.vue'
import getPreviewObj from "../hook/useBankPreview.js";
import { onMounted, reactive, ref, watch } from 'vue'
import {tableItem, configListApi, configBankApi, enableBankTypeListApi, previewShowApi, ruleDelApi} from './const.js'
import { Plus, Search } from "@element-plus/icons-vue";
import { useRouter, useRoute } from 'vue-router'
import $button from '@/button'
import {studentDelApi} from '../../train/student/const'
import {ElMessage} from 'element-plus'
const { proxy } = getCurrentInstance()
const router = useRouter()
tableItem.btnArray[0].handle = (row) => {
  router.push({ path: '/modules/question/configRule', query: { type: 'look', id: row.id } })
}
tableItem.btnArray[1].handle = (row) => {
  router.push({ path: '/modules/question/configRule', query: { type: 'edit', id: row.id } })
}
const previewObj = getPreviewObj()
tableItem.btnArray[2].handle = (row) => {
  previewObj.preview(row)
}
const ruleDel = (requestDel, text) => {
  proxy.$modal.confirm(text).then(() => {
    ruleDelApi(requestDel).then(res => {
      ElMessage.success(res.msg || '操作成功'); tableItem.pageInfo.paging()
    })
  })
}

// 删除
tableItem.btnArray[3].handle = (row) => {
  ruleDel(row.id, '确定删除这条数据吗？')
}


const operationItem = reactive({
  defaultSearch: true,//默认搜索按钮
  defaultRefresh: false,//默认重置按钮
  SearchText: "查询", //搜索文字 默认搜索
  customTableHeader: false,//自定义表单头部插槽
  SearchItem: [
    {
      code: "courseParentId",
      name: "类别名称",
      type: 'select',
      value: 'id',
      label: 'name',
      options: []
    },
    {
      code: "courseBankTypeId",
      name: "题库类型",
      type: 'select',
      value: 'id',
      label: 'name',
      options: []
    },
  ],
  //   v-hasPermi="['monitor:job:export']"
  menuArray: [
    {
      show: true,
      type: 'primary',
      text: '配置规则',
      icon: Plus,
      hasPermi: [$button.trainbankRuleadd || null],
      handle: () => {
        router.push({ path: '/modules/question/configRule', query: { type: 'add' } })
      }
    },
  ]
})
onMounted(() => { initCourseOtherOption(); initSubOption() })

const initCourseOtherOption = () => {
  configListApi({ "levelNum": 2 }).then(res => {
    operationItem.SearchItem[0].options = res.rows
  })
}
const initSubOption = () => {
  //一开始，没有数据
  operationItem.SearchItem[1].options = ""
  // configListApi({ "levelNum": 3 }).then(res => {
  //   operationItem.SearchItem[1].options = res.rows
  // })
}
//在查询栏：监视类别名称，根据类别名称获取题库类型
watch(() => tableItem.pageInfo.request.courseParentId, () => {
  //如果没有选择类别，那么后面的题库类型就无数据
  if (!tableItem.pageInfo.request.courseParentId) {
    operationItem.SearchItem[1].options = ""
  } else {
    enableBankTypeListApi({ courseId: tableItem.pageInfo.request.courseParentId }).then((result) => {
      operationItem.SearchItem[1].options = result.rows;
    });
  }
})

</script>

<style  lang="scss">
.dialog-table-question {
  .el-table .el-table__cell {
    height: 50px;
    
  }
}
</style>
